<template>
    <div class="mine">
        <header>
            <div class="bar">
                <span class="glyphicon glyphicon-menu-left"></span>
                <span>我的</span>
            </div>
            <div class="photo">
               <div class="content">
                    <img src="" alt="">
                    <div class="center">
                        <p><router-link to="/login" style="color:white">登录/注册</router-link></p>
                        <span class="glyphicon glyphicon-erase"></span>
                        <span>登陆后享受更多特权</span>
                    </div>
                    <span class="right glyphicon glyphicon-menu-right"></span>
               </div>
            </div>
        </header>
        <div class="qhj">
            <ul>
                <li>
                    <div><img src="../../../static/icon/qb.png" alt=""></div>
                    <span>钱包</span>
                </li>
                <li>
                     <div><img src="../../../static/icon/hb.png" alt=""></div>
                    <span>红包</span>
                </li>
                <li>
                     <div><img src="../../../static/icon/jb.png" alt=""></div>
                    <span>金币</span>
                </li>
            </ul>
        </div>

        <div class="contentB">
            <!-- <div class="con1">
                <span class="glyphicon glyphicon-map-marker" ></span>
                <span style="font-size:.625rem">我的地址</span>
                <span class="right glyphicon glyphicon-menu-right right"></span>
            </div> -->
             <group class="group">
                <cell is-link class="sub-item" value-align="left">  
                   <img  slot="icon" src="../../../static/icon/5.png" alt="">
                   <span slot style="color:#333;font-size:.625rem">&nbsp;我的地址</span>
                </cell>
            </group>
            <group class="group">
                <cell is-link class="sub-item" value-align="left">  
                   <img  slot="icon" src="../../../static/icon/1.gif" alt="">
                   <span slot style="color:#333;font-size:.625rem">&nbsp;金币商城</span>
                </cell>
               <cell is-link class="sub-item" value-align="left">  
                   <img  slot="icon" src="../../../static/icon/2.png" alt="">
                   <span slot style="color:#333;font-size:.625rem">&nbsp;分享拿10元现金</span>
                </cell>
            </group>
             <group class="group">
                <cell is-link class="sub-item" value-align="left">  
                   <img  slot="icon" src="../../../static/icon/3.png" alt="">
                   <span slot style="color:#333;font-size:.625rem">&nbsp;我的客服</span>
                </cell>
               <cell is-link class="sub-item" value-align="left">  
                   <img  slot="icon" src="../../../static/icon/4.png" alt="">
                   <span slot style="color:#333;font-size:.625rem">&nbsp;下载饿了么APP</span>
                </cell>
            </group>
                        
          
        </div>


    </div>
    
</template>
<script>
import { Group, Cell,CellBox } from 'vux'

export default {
    components:{
         Group,
         Cell,
         CellBox
    }
}
    
</script>
<style scoped>
p{
    margin: 0px;
    padding: 0px;
     /* 12/16 */
  
  
}
header{
    width: 100%;
    height: 6.25rem /* 100/16 */;
    border: .0625rem /* 1/16 */ solid rgb(30, 164, 253);
    background-color: rgb(30, 164, 253);
    color: white;
}
header .bar{
    width: 100%;
    height: 1.875rem /* 30/16 */;
    background-color: rgb(30, 164, 253);
    text-align: center;
    line-height: 1.875rem /* 30/16 */;
    color: white;
    font-size: .75rem /* 12/16 */;
    position: fixed;
    top: 0px;
    font-weight: 600;
    z-index: 100;
     /* 10/16 */
}
header .bar span:nth-child(1){
    margin-left: .3125rem /* 5/16 */;
    position: absolute;
    left: 0px;
    top:.625rem /* 10/16 */;
}
header .photo{
    height: 5rem /* 80/16 */;
    width:100%;
     /* line-height: 5rem ; */
    margin-top: 1.875rem /* 30/16 */;
    /* border: 1px solid black; */
    position: relative;
}
header .photo .content{
    width:90%;
    height: 3.75rem /* 60/16 */;
    /* border: 1px solid green; */
    margin: .625rem /* 10/16 */ auto;
    position: relative;

    
}
header .photo img{
    width:2.8125rem /* 45/16 */;
    border-radius: 50%;
    margin-top: .3125rem /* 5/16 */;
}

header .photo .center{
    width: 50%;
    height:3.125rem /* 50/16 */;
    position: absolute;
    /* border: 1px solid purple; */
    left: 3.75rem /* 60/16 */;
    top:calc(50% - 1.5625rem /* 25/16 */);
    
}
header .photo .center p{
    font-size: 1rem /* 16/16 */;
    font-weight: 600;
}
header .photo .center span{
    font-size: .5625rem /* 9/16 */;
}
header .photo .right{
    position: absolute;
    top:50%;
    right: .3125rem /* 5/16 */;
    font-size: .5rem /* 8/16 */;

}
.qhj{
    width: 100%;
    height: 3.75rem /* 60/16 */;
    border-bottom: .0625rem /* 1/16 */ solid rgb(216, 216, 216);
}
ul{
    width: 100%;
    height: 100%;
}
.qhj li{
    width: 33.33%;
    height: 100%;
    text-align: center;
    /* border: 1px solid black; */
    float: left;
}
.qhj li:nth-child(2){
    border-left: .03125rem /* 0.5/16 */ solid rgb(216, 216, 216);
     border-right: .03125rem /* 0.5/16 */ solid rgb(216, 216, 216);
}

.qhj li div img{
    margin-top: .75rem /* 12/16 */;
   
}
.con1{
    border-top: .0625rem  solid rgb(216, 216, 216);
    border-bottom: .0625rem  solid rgb(216, 216, 216);
     height:2rem;
     margin:.625rem  0px;
     line-height: 2rem;
     position: relative;
     background-color: white;
}
.con1 span:nth-child(1){
    color:rgb(30, 164, 253);
    font-size:1rem;
    margin-left: .3125rem /* 5/16 */;
}
.con1 .right{
  position: absolute;
  right:.3125rem /* 5/16 */;
  top:.625rem /* 10/16 */;
  color:rgb(216, 216, 216);
}
.sub-item{
    color:black;
    height: 1.875rem /* 32/16 */;
    font-size: .75rem /* 12/16 */;

}
.group{
    margin-top: 0px;
}
img{
    width: .875rem /* 14/16 */;
}


    
</style>